<template>
  <div class="proDetail">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="darkred">
      <van-swipe-item v-for="item in gallery" :key="item.id" loop>
        <img :src="item.img_url" alt="" style="width: 100%" />
      </van-swipe-item>
    </van-swipe>
    <info :price="80"></info>
    <section class="goodsInfo">
      <div class="title">{{ goodsInfo.name }}</div>
      <div class="brief">{{ goodsInfo.goods_brief }}</div>
      <div class="price">￥ {{ goodsInfo.retail_price | priceFilter }}</div>
    </section>
    <van-cell is-link @click="showPopup">请选择规格数量</van-cell>
    <ProParameters
      :attrib="attribute"
      v-show="attribute.length > 0"
      :goodsdesc="goodsInfo.goods_desc"
    />
    <!-- <van-popup
      v-model="isShowPopup"
      closeable
      position="bottom"
      :style="{ height: '40%' }"
    >
      <sku></sku>
    </van-popup> -->
    <issue :issue="issue"></issue>
    <div class="allLook">
      <div class="allLook_title">
        <span>大家都在看</span>
      </div>
      <products :goodsList="goodsList"> </products>
    </div>
    <productsTab @toAddcart='togoAddcart' :goodsNum='goodsCount'/>
    <!-- Sku 商品规格 sku组件 -->
    <van-sku
      ref="sku"
      v-model="isShowSku"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
    />
  </div>
</template>

<script>
import { proDetailData, proRelatedData,getGoodscount,addCart} from "@/request/api";
import info from "./info.vue";
import sku from "./sku.vue";
import ProParameters from "./ProParameters.vue";
import issue from "./issue.vue";
import products from "@/components/products/products.vue";
import productsTab from "./productsTab.vue";
export default {
  components: {
    info,
    sku,
    ProParameters,
    issue,
    products,
    productsTab,
  },
  data() {
    return {
      gallery: [],
      attribute: [],
      goodsInfo: {},
      issue: [], // 常见问题数组
      goodsList: [],
      //Sku
      isShowSku:false,
      sku:{
        tree:[],
        hide_stock:false, // 是否隐藏剩余库存,
        price: '1.00', // 默认价格（单位元）
        stock_num: 227, // 商品总库存
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: 'https://img01.yzcdn.cn/1.jpg'
      },
      //goodsCount 商品购物车数量
      goodsCount:'',
      productList:''

    };
  },
  created() {
    let _this = this;
    // console.log(this.$route.query.id)
    //拿到数据在这里请求
    proDetailData({
      id: _this.$route.query.id,
    }).then((res) => {
      //详情页的数据展示
      console.log(res);
      _this.gallery = res.data.gallery;
      _this.goodsInfo = res.data.info;
      _this.attribute = res.data.attribute;
      _this.issue = res.data.issue;
      //sku的库存
      _this.goods.picture=res.data.info.list_pic_url;
      _this.sku.price=res.data.info.retail_price;
      _this.sku.stock_num=res.data.info.goods_number;
      _this.productList=res.data.productList

    });
    //相关产品数据请求
    proRelatedData({
      id: _this.$route.query.id,
    }).then((res) => {
      _this.goodsList = res.data.goodsList;
    });
    //请求获取购物车产品数量,要做拦截
    getGoodscount().then(res=>{
      console.log('获取购物车产品数量',res.data.cartTotal.goodsCount)
      this.goodsCount=res.data.cartTotal.goodsCount
    })
  },
  mounted() {},
  methods: {
    showPopup() {
      this.isShowSku = !this.isShowSku
    },
    //点击加入购物车弹出商品规格
    togoAddcart(){
      //先判断有没有登陆
      // let token=localStorage.getItem('token')
      //   if(!token){
      //     this.$toast('请先登录!')
      //     setTimeout(()=>{
      //       this.$router.push('/user')
      //     },1000)
      //     return
      //   }
      let ret=this.utils.mustBeLogin()
      if(!ret)return;

      let _this=this;
      //sku数量的获取
      let number=_this.$refs.sku.getSkuData().selectedNum
      if(this.isShowSku){
        //真正加入购物车的操作
        addCart({
          goodsId: _this.$route.query.id,
          productId:_this.productList[0].id,
          number:number
        }).then(res=>{
          // console.log(res)
          //更新购物车数量的数据
          this.goodsCount=res.data.cartTotal.goodsCount
          this.$toast.success('加入成功')
        })

      }
      this.isShowSku = !this.isShowSku;
    }
  },
};
</script>

<style scoped lang="less">
.goodsInfo {
  text-align: center;
  background-color: #fff;
  padding: 0.2rem 0;
  line-height: 32px;
  .title {
    color: #000;
    font-size: 0.24rem;
  }
  .brief {
    color: #666;
    font-size: 0.14rem;
  }
  .price {
    color: darkred;
  }
}
.van-cell {
  border-top: 1px solid #ccc;
}
.allLook {
  background: #fff;
  .allLook_title {
    height: 50px;
    line-height: 50px;
    position: relative;
    &::after {
      content: "";
      width: 40%;
      height: 2px;
      background: #ccc;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 1;
    }
    span {
      position: absolute;
      width: 30%;
      background: #fff;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      z-index: 2;
      text-align: center;
      font-size: 18px;
    }
  }
}
//sku
/deep/.van-sku-messages{
  padding: 0;
}
/deep/.van-sku-container{
  min-height: auto;
}
/deep/.van-sku__stepper-title,/deep/.van-sku__stepper{
  float: none;
}
</style>
